import { useIntersectionObserver } from '@vueuse/core'
// 定义懒加载插件
export const lazyPlugin = {
    //这个是固定方法
    install(app) {
        // 懒加载指令逻辑
        // 自定义全局指令
        app.directive('img-lazy', {
            mounted(el, binding) {
                // <img v-img-lazy = 'xxx'/>
                //el ：指令绑定的DOM，比如img
                //binding：bingding.value = 绑定的el表达式的值，比如xxx
                console.log(el, binding.value)
                const {stop}=useIntersectionObserver(el,    // 第一个参数是监听的对象
                    ([{ isIntersecting }]) => { // isIntersecting返回布尔值，是否el在视口区域
                        if (isIntersecting) {
                            // 进入视口区域
                            el.src = binding.value
                            stop()
                        }
                    },
                )
            }
        })
    }
}